<template>
  <el-dialog title="领导人员述职报告" :close-on-click-modal="false" :visible.sync="visible" @close="clearDataList()" width="800px" top="8vh">
    <el-container>
      <el-main style="max-height:70vh">
    <div class="avue-crud">
      <el-table :data="dataList" stripe v-loading="dataListLoading" height="50vh">
        <el-table-column type="index" width="80" label="序号">
        </el-table-column>
        <el-table-column prop="cpgzBpfdx" label="姓名">
          <template slot-scope="scope">
            {{scope.row.cpgzBpfdx == "个人"?scope.row.bcpUserName:scope.row.bcpDeptName}}
          </template>
        </el-table-column>
        <el-table-column prop="editUserId" label="上传情况" width="150">
          <template slot-scope="scope">
             {{scope.row.szbgFjdz ?"已上传":"未上传"}}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button v-if="scope.row.szbgFjdz==null || scope.row.szbgFjdz==''" type="primary" plain @click="lockUp(scope.row.id,scope.row)">上传</el-button>
            <el-button v-else type="success" plain @click="lockUp(scope.row.id,scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="avue-crud__pagination">
      <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" background layout="total, sizes, prev, pager, next">
      </el-pagination>
    </div>
      </el-main>
    </el-container>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" plain @click="visible = false">取消</el-button>
    </span>
     <cepinghdgulszbgUploadForm  v-if="cepinghdgulszbgUploadFormVisible" ref="cepinghdgulszbgUploadForm"   @refreshSubList="getDataList" ></cepinghdgulszbgUploadForm>
  </el-dialog>

</template>

<script>
import { fetchList } from '@/api/ceping/cepinghdglszbgb'
import cepinghdgulszbgUploadForm from './cepinghdgulszbg-upload-form'

export default {
  data() {
    return {
      hdName:'',
      visible: false,
      canSubmit: false,
      cepinghdgulszbgUploadFormVisible:false,
      dataListLoading: false,
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataForm: {
        hdId: ''
      },
    }
  },
   components: {
   cepinghdgulszbgUploadForm
  },
  methods: {

    init(id,hdName) {
      this.visible = true;
      this.dataForm.hdId = id;
      if(hdName){
          this.hdName = hdName;
      }
      this.getDataList();
    },
    clearDataList() {
      this.visible = false;
      this.dataList = [];
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      fetchList(Object.assign({
        current: this.pageIndex,
        size: this.pageSize
      }, this.dataForm)).then(response => {
        this.dataList = response.data.data.records

        this.totalPage = response.data.data.total
      })
      this.dataListLoading = false
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    lockUp(id, row){
      var p="";
      if(row.cpgzBpfdx=='个人'){
          p=row.bcpUserName;
      }else{
        p = row.bcpDeptName;
      }
      this.cepinghdgulszbgUploadFormVisible=true;
      this.$nextTick(()=>{
            this.$refs.cepinghdgulszbgUploadForm.init(id,p);
      });


    }
  }

}
</script>
